<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/elementUI.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/elementUI.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../../../../../lemeng_web_portal/src/main/webapp/js/util.js"></script>

</head>
<body>

<div id="app">


    <div id="main" style="width: 95%;height:300px;"></div>

    <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%">

        <el-table-column
                prop="name"
                label="类型">
        </el-table-column>

        <el-table-column
                prop="value"
                label="数量">
        </el-table-column>



    </el-table>


</div>

</body>
<script>
    new Vue({
        el: "#app",
        data: {
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value2: '',


            mode:{
                title:"",
                url:""
            },
            fileList:[],
            formLabelWidth:"120px",
            query:{
                title:"",
                page:1,
                size:10
            },
            form:{
                image:"",
                title:"",
            },
            tableData:[],
            total:0,
            multipleSelection:[],
            dialogImageUrl: '',
            dialogVisible: false,
            dialogFormVisible:false
        },
        watch:{
            value2(n){
                try {
                    var date1 = n[0];
                    var date2 = n[1];

                    date1 = date1.Format("yyyy-MM-dd")
                    date2 = date2.Format("yyyy-MM-dd")

                    this.initData(date1, date2)
                } catch (e) {
                    this.initData()
                }
            }
        },
        methods: {
            goAlbumList(index,row){
                location.href = "album_list.html?id="+row.id
            },
            handleEdit(index, row) {
                this.mode = {
                    title:"修改",
                    url:"/album/update.do"
                }
                this.form = JSON.parse(JSON.stringify(row));//普通输入框的回显
                this.fileList = [{name: row.name, url: row.image}];
                this.dialogFormVisible = true;
            },
            delAll(){
                if(this.multipleSelection.length>0){
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.delBrand(this.multipleSelection.map(m=>m.id).join(","));
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }else{
                    this.$message('请选择一条数据');
                }
            },
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delBrand(row.id);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            delBrand(ids){
                axios.get(`/album/deleteAll.do?ids=${ids}`).then(res=>{
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.initData()
                })

            },
            beforeCloseDialog(close){

                this.initFormData();
                close()//关闭弹窗的方法
            },
            addBrand(){
                axios.post(this.mode.url,this.form).then(res=>{
                    this.initFormData();
                    this.initData()
                })
            },
            toAdd(){
                this.mode = {
                    title:"添加",
                    url:"/album/add.do"
                }
                this.dialogFormVisible = true;
            },
            initFormData(){
                this.form = {
                    image:"",
                    title:""
                }
                this.fileList = [];
                this.dialogFormVisible = false;

            },
            initData(d1,d2){
                axios.get(`/school/selectCountInfo.do`).then(res=>{
                    this.tableData = res.data;
                    this.initEcharts()
                })

            },
            initEcharts(){





                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '学校类型数量统计',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'horizontal',
                        bottom:"10",
                        itemWidth:20,
                        itemHeight:20,
                        align:"left",
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'pie',
                            radius: '50%',
                            center:['50%', '50%'],
                            data: this.tableData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                this.query.size = val
            },
            handleCurrentChange(val) {
                this.query.page = val
            },
            handleRemove(file, fileList) {
                this.form.image = "";
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            uploadSuccess(res){
                this.form.image = res;
            }
        },
        created() {

            this.initData();
        }
    })
</script>
</html>